<template>
  <div class="home overflowY">
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> 
      <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
    </object>
    <div class="PageContent" v-loading="loading">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        @submit.native.prevent
        label-width="150px"
      >
        <div class="PageItem">
          <el-row class="PageInfo">
            <i class="info-bar"></i>预约接运信息
          </el-row>
          <el-row class="paddingleft2em">
            <el-form-item label="　联系人姓名" prop="contact">
              <el-input v-model="ruleForm.contact" placeholder="请输入联系人姓名" maxlength="5"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话" prop="contactPhone">
              <el-input
                v-model="ruleForm.contactPhone"
                minlength="2"
                maxlength="50"
                placeholder="请输人联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="　逝者姓名">
              <el-input v-model="ruleForm.deadName" maxlength="10" placeholder="请填写逝者姓名"></el-input>
            </el-form-item>
            <el-form-item label="　联系人类型" prop="contactType">
              <el-radio
                v-for="item in dictionary.dicts.rec_relation_type"
                :key="item.dataCode"
                :label="item.dataCode"
                :value="item.dataCode"
                v-model="ruleForm.contactType"
              >{{item.dataText}}</el-radio>
            </el-form-item>
          </el-row>
          <el-row class="paddingleft2em">
            <el-form-item label="　死亡原因">
              <el-input v-model="ruleForm.deathCause" maxlength="20" placeholder="请填写死亡原因"></el-input>
            </el-form-item>
            <el-form-item label="　与联系人关系">
              <el-select
                v-model="ruleForm.relationCode"
                clearable
                filterable
                placeholder="请选择"
                class="w150"
                @change="StorageChanges('relationCode',ruleForm.relationCode)"
              >
                <el-option
                  v-for="item in dictionary.dicts.relationship_with_deceased"
                  :key="item.dataCode"
                  :label="item.dataText"
                  :value="item.dataCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="　预约车型" prop="carTypeCode">
              <el-select
                v-model="ruleForm.carTypeCode"
                clearable
                filterable
                placeholder="请选择预约车型"
                @change="loadTransportCar(ruleForm.carTypeCode)"
              >
                <el-option
                  v-for="item in dictionary.dicts.transport_car_type"
                  :key="item.dataCode"
                  :label="item.dataText"
                  :value="item.dataCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="　车辆用途" prop="purposeCode">
              <el-select
                v-model="ruleForm.purposeCode"
                clearable
                filterable
                placeholder="请选择车辆用途"
                class="w150"
                @change="VehicleUse(ruleForm.purposeCode)"
              >
                <el-option
                  v-for="item in dictionary.dicts.transport_car_use"
                  :key="item.dataCode"
                  :label="item.dataText"
                  :value="item.dataCode"
                  :disabled="!!item.disableState"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <el-row class="paddingleft2em">
            <el-form-item label="　预约到达时间" prop="arrivalTime">
              <el-date-picker
                format="yyyy-MM-dd HH:mm"
                v-model="ruleForm.arrivalTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="　接运费" prop="recCharge">
              <el-input v-model="ruleForm.recCharge" placeholder="仅议价时需要手动输入"></el-input>
            </el-form-item>
            <!-- <el-form-item label="来 源" >
              <el-select
                v-model="ruleForm.sourceCode"
                clearable
                filterable
                placeholder="请选择"
                class="w150"
                @change="StorageChanges('sourceCode',ruleForm.sourceCode)"
              >
                <el-option
                  v-for="item in dictionary.dicts.rec_source_type"
                  :key="item.dataCode"
                  :label="item.dataText"
                  :value="item.dataCode"
                />
              </el-select>
            </el-form-item>-->
            <el-form-item label="接运状态" prop="taskStateCode">
              <el-select
                v-model="ruleForm.taskStateCode"
                clearable
                filterable
                placeholder="请选择"
                class="w150"
                @change="StorageChanges('taskStateCode',ruleForm.taskStateCode)"
              >
                <el-option
                  v-for="item in dictionary.dicts.rec_task_state_type"
                  :key="item.dataCode"
                  :label="item.dataText"
                  :value="item.dataCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="遗体到馆存放" prop="bodyDepositCode">
              <el-radio
                v-for="item in dictionary.dicts.body_deposited_type"
                :key="item.dataCode"
                :label="item.dataCode"
                :value="item.dataCode"
                v-model="ruleForm.bodyDepositCode"
                @change="StorageChanges('bodyDepositCode',item.dataText)"
              >{{item.dataText}}</el-radio>
            </el-form-item>
          </el-row>
          <el-row class="paddingleft2em">
            <el-form-item label="　接运地址" prop="address">
              <el-input
                v-model="ruleForm.address"
                maxlength="50"
                class="w1230"
                placeholder="请填写接运地址"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row class="paddingleft2em">
            <el-form-item label="　备注">
              <el-input v-model="ruleForm.remark" maxlength="50" class="w1230" placeholder="请填写备注"></el-input>
            </el-form-item>
          </el-row>
          <div class="DescriptionOfCharges">
            <h4>收费说明:</h4>
            <p>{{ruleForm.chargeRemark}}</p>
          </div>
          <!-- 这里不要写死 -->
        </div>
        <div class="PageItem" v-if="dictionary.recDispatchEnable">
          <el-row class="PageInfo">
            <i class="info-bar"></i>车辆调度
          </el-row>
          <el-row class="paddingleft2em">
            <el-form-item label="　接运车辆" prop="dispatchCar.recCarId">
              <el-select
                value
                clearable
                filterable
                placeholder="接运车辆"
                v-model="ruleForm.dispatchCar.recCarId"
                @change="StorageChanges('recCarId',ruleForm.dispatchCar.recCarId)"
              >
                <el-option
                  v-for="item in dictionary.PickUpVehicle"
                  :key="item.id"
                  :label="item.carCode"
                  :value="item.id"
                  ref="option"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="　接运司机">
              <el-select
                v-model="ruleForm.recInfoDriver"
                clearable
                filterable
                placeholder="接运司机"
                class="w150"
                multiple
              >
                <el-option
                  v-for="item in dictionary.users.transport_task_driver_user"
                  :key="item.dataCode"
                  :label="item.fullName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="　抬尸工">
              <el-select
                v-model="ruleForm.recInfoPorter"
                clearable
                filterable
                placeholder="抬尸工"
                multiple
                class="w150"
              >
                <el-option
                  v-for="item in dictionary.users.transport_task_porter"
                  :key="item.dataCode"
                  :label="item.fullName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <el-form-item label="调度人姓名">
            <el-input v-model="this.$store.getters.name" :readonly="true"></el-input>
          </el-form-item>
        </div>
        <div class="PageItem" v-if="true">
          <el-row class="PageInfo">
            <i class="info-bar"></i>随车物品选择
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="tablewrapper">
                <div class="table">
                  <div class="title">
                    <span>可选随车辆物品、服务</span>
                  </div>
                  <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="itemName" label="收费项目" width="180"></el-table-column>
                    <el-table-column prop="itemPrice" label="单价" width="180">
                      <template slot-scope="scope" style="width:50px">
                        <input
                          type="text"
                          v-model="scope.row.itemPrice"
                          style="width:80%;height:80%;border:1px solid #dee"
                          :readonly="!!scope.row.asFixPrice"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column prop="itemNumber" label="数量">
                      <template slot-scope="scope">
                        <span>{{scope.row.itemNumber}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="itemUnit" label="单位"></el-table-column>
                    <el-table-column prop="discountCharge" label="优惠"></el-table-column>
                    <el-table-column prop="address" label="总金额">
                      <template slot-scope="scope">
                        <span
                          style="margin-left: 10px"
                        >{{TotalAmount(scope.row.itemPrice,scope.row.itemNumber,scope.row.discountCharge) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="AddCarItems(scope)">添加</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <el-form-item label="　 ">
                <el-input
                  v-model="searchtext"
                  maxlength="50"
                  class="w50"
                  placeholder="输入收费项目名称或简写快速检索"
                ></el-input>
              </el-form-item>
              <el-button @click="search">搜索</el-button>
            </el-col>
            <el-col :span="12">
              <div class="tablewrapper">
                <div class="table">
                  <div class="title">
                    <span>已选择随车辆物品、服务</span>
                  </div>
                  <el-table
                    :data="ruleForm.recSelItem"
                    style="width: 100%"
                    border
                    show-summary
                    :summary-method="getSummaries"
                  >
                    <el-table-column prop="itemName" label="收费项目" width="180"></el-table-column>
                    <el-table-column prop="itemPrice" label="单价" width="180"></el-table-column>
                    <el-table-column prop="itemNumber" label="数量"></el-table-column>
                    <el-table-column prop="itemUnit" label="单位"></el-table-column>
                    <el-table-column prop="discountCharge" label="优惠"></el-table-column>
                    <el-table-column prop="feeAmount" label="总金额">
                      <template slot-scope="scope">
                        <span
                          style="margin-left: 10px"
                        >{{ TotalAmount(scope.row.itemPrice,scope.row.itemNumber,scope.row.discountCharge)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="DeleteItems(scope)" type="text">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row class="PageItem" :gutter="30" style="text-align: right;margin:30px 0;">
          <!-- <el-button type="primary" @click="Save('ruleForm')" :disabled="false" v-loading="false">保存</el-button> -->
          <el-button type="primary" @click="SaveAndService('ruleForm')" :disabled="false">保存并新增</el-button>
          <el-button type="primary" plain @click="SaveAndService('ruleForm','return')">保存并返回接运列表</el-button>
          <el-button type="primary" plain @click="PrintQRcode(ruleForm.id)">打印接运二维码</el-button>
        </el-row>
      </el-form>
    </div>
    <div style="width:0px;height:0px; overflow: hidden;">
      <object id="view1" type="application/x-eloamplugin" name="view"></object>
    </div>
  </div>
</template>
<script>
import * as Type from "@/api/service";
import * as user from "@/api/user";
import { mapGetters } from "vuex";
import { getLodop } from "@/utils/lodopFuncs";
export default {
  name: "CarReservation",
  computed: {
    details() {
      // 判断页面是否从其他页面带过来的id
      if (this.$route.params.id) {
        return true;
      } else {
        return false;
      }
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入联系人电话"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("联系人电话格式不正确"));
      } else {
        callback();
      }
    };
    var recCharge = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入接运费"));
      } else if (isNaN(value)) {
        callback(new Error("接运费请输入数字"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      ruleForm: {
        id: 0,
        recCode: null, //接运二维码
        contact: "", //联系人
        contactPhone: "", //联系电话
        contactType: "", //联系人类型
        deadName: "", //逝者姓名
        deathCause: "", //死亡原因
        relationCode: "", //联系人与逝者关系
        relation: "", //联系人与逝者关系名称
        carTypeCode: "", //预约车型编码
        carType: "", //预约车型
        purposeCode: "", //车辆用途编码
        purpose: "", //车辆用途
        arrivalTime: "", //预约到达时间
        recCharge: "", //接运费
        bodyDepositCode: "", //遗体到馆存放编码
        bodyDeposit: "", //遗体到馆存放
        address: "", //接运地址
        sourceCode: "", //来源编码
        source: "", //来源
        taskStateCode: "", //接运状态编码
        taskState: "", //接运状态
        chargeRemark: "", //收费说明
        remark: "", //备注
        recInfoDriver: [], //接运司机
        recInfoPorter: [], //抬shi工
        dispatchCar: {
          //接运车辆信息
          recId: 0,
          id: 0,
          rec_car_id: ""
        },
        recSelItem: [], //已选择随车物品
        relSelDelete: [] //要删除的随车明细
      }, //按钮权限
      // haha:'none',
      searchtext: "",
      pickerOptions: [],
      rules: {
        contact: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        deadName: [
          { required: true, message: "请输入逝者姓名", trigger: "blur" }
        ],
        deathCause: [
          { required: true, message: "请输入死亡原因", trigger: "blur" }
        ],
        relationCode: [
          {
            required: true,
            message: "请选择联系人与逝者关系",
            trigger: "change"
          }
        ],
        sourceCode: [
          { required: true, message: "请选择来源", trigger: "change" }
        ],
        contactType: [
          { required: true, message: "请选择联系人类型", trigger: "change" }
        ],
        carTypeCode: [
          { required: true, message: "请选择预约车型", trigger: "change" }
        ],
        purposeCode: [
          { required: true, message: "请选择车辆用途", trigger: "change" }
        ],
        arrivalTime: [
          { required: true, message: "请选择到达时间", trigger: "blur" }
        ],
        bodyDepositCode: [
          { required: true, message: "请遗体到馆存放", trigger: "change" }
        ],
        recCharge: [
          { required: true, message: "请输入接运费", trigger: "blur" },
          { validator: recCharge, trigger: "blur" }
        ],
        taskStateCode: [
          { required: true, message: "请选择接运状态", trigger: "change" }
        ],
        address: [
          { required: true, message: "请输入接运地址", trigger: "blur" }
        ],
        dispatchCar: {
          recCarId: [
            { required: true, message: "请选择接运车辆", trigger: "blur" }
          ]
        }
      },
      dictionary: {
        dicts: {},
        users: {}
      }, //字典
      onpresscTime: 0, //  阻止短时间内连续点击
      tableData: [],
      callTableData: []
    };
  },
  mounted() {
    if (this.details) {
      this.detailedInformation(this.$route.params.id);
    }
    user.getVehicleDictionary({
        dictTypeCodes: [
          "body_deposited_type",
          "transport_car_type",
          "rec_relation_type",
          "rec_source_type",
          "relationship_with_deceased",
          "transport_car_use",
          "rec_source_type",
          "rec_task_state_type"
        ],
        id: 0,
        serviceItemTypeCode: "use_in_rec_info",
        userRoleCodes: ["transport_task_driver_user", "transport_task_porter"]
      })
      .then(res => {

        if(res && res.data){
          this.dictionary = res.data;
          // this.dictionary.recDispatchEnable = false
          console.log(this.dictionary, 33333333);
          if (!this.details) {
            this.ruleForm.bodyDepositCode = this.ruleForm.contactType = 0;
            this.ruleForm.bodyDeposit = "冷藏";
          }
          res.data.serviceItems.useInRecInfo.forEach(item => {
            item.itemNumber = parseInt(item.itemNumber);
            item.feeAmount = item.itemNumber * item.itemPrice;
            item.discountCharge = 0;
          }); //金额转换成数字类型
          // 计算总价
          this.tableData = res.data.serviceItems.useInRecInfo;
          this.callTableData = res.data.serviceItems.useInRecInfo;
          //根据预约车型限制车辆用途
          if (this.details) {
            if (
              this.ruleForm.carTypeCode === 3 ||
              this.ruleForm.carTypeCode === 4
            ) {
              console.log(this.dictionary.dicts.transport_car_use);
              this.dictionary.dicts.transport_car_use.forEach(item => {
                if (item.dataCode === 2) item.disableState = 1;
              });
            }
          } else {
            this.StorageChanges("taskStateCode", 0);
            this.ruleForm.taskStateCode = 0;
          }
        }

      });
  },
  methods: {
    //预约信息保存方法
    Save(ruleForm) {
      //验证连点
      if (Date.now() - this.onpresscTime > 2000) {
        this.onpresscTime = Date.now();
        console.log(Date.now());
      } else {
        return;
      }
      //提交默认客户端
      this.ruleForm.source = "客户端";
      this.ruleForm.sourceCode = 1;
      this.ruleForm.arrivalTime = this.formatDate(
        new Date(this.ruleForm.arrivalTime)
      ); //时间格式处理
      if (this.details) {
        this.ruleForm.recSelItem.forEach(item => {
          // recid添加
          item.recId = this.$route.params.id;
        });
      }
      //表单验证
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          Type["VehicleAppointment"](this.ruleForm).then(res => {
            console.log(res, "成功了");
            let { data } = res;
            if (!data) {
              this.$message("保存数据失败");
              return;
            }
            this.ruleForm.id = data.id;
            this.$message({
              message: res.message,
              type: "success"
            });
          });
        }
      });
    },
    SaveAndService(ruleForm, name) {
      if (Date.now() - this.onpresscTime > 1000) {
        this.onpresscTime = Date.now();
        console.log(Date.now());
      } else {
        return;
      }
      //提交默认客户端
      this.ruleForm.source = "客户端";
      this.ruleForm.sourceCode = 1;
      this.ruleForm.arrivalTime = this.formatDate(
        new Date(this.ruleForm.arrivalTime)
      ); //时间格式处理
      if (this.details) {
        this.ruleForm.recSelItem.forEach(item => {
          // recid添加
          item.recId = this.$route.params.id;
        });
      }
      //表单验证
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          Type["VehicleAppointment"](this.ruleForm).then(res => {
            console.log(res, "成功了");
            let { data } = res;
            if (!data) {
              this.$message("保存数据失败");
              return;
            }
            this.ruleForm.id = data.id;
            this.$message({
              message: res.message,
              type: "success"
            });

            if (name === "return") {
              this.$router.push("PickUpList");
            }
            // alert(this.$route.params.id);
            // this.$route.params.id = null
            //   alert(this.$route.params.id);
            this.ruleForm = {
              id: 0,
              recCode: null, //接运二维码
              contact: "", //联系人
              contactPhone: "", //联系电话
              contactType: 0, //联系人类型
              deadName: "", //逝者姓名
              deathCause: "", //死亡原因
              relationCode: "", //联系人与逝者关系
              relation: "", //联系人与逝者关系名称
              carTypeCode: 1, //预约车型编码
              carType: "", //预约车型
              purposeCode: 1, //车辆用途编码
              purpose: "遗体接运", //车辆用途
              arrivalTime: "", //预约到达时间
              recCharge: "", //接运费
              bodyDepositCode: 0, //遗体到馆存放编码
              bodyDeposit: "冷藏", //遗体到馆存放
              address: "", //接运地址
              sourceCode: 1, //来源编码
              source: "客户端", //来源
              taskStateCode: 0, //接运状态编码
              taskState: "预约登记", //接运状态
              chargeRemark: "", //收费说明
              remark: "", //备注
              recInfoDriver: [], //接运司机
              recInfoPorter: [], //抬shi工
              dispatchCar: {
                //接运车辆信息
                recId: 0,
                id: 0,
                rec_car_id: ""
              },
              recSelItem: [], //已选择随车物品
              relSelDelete: [] //要删除的随车明细
            };
            this.loadTransportCar(1);
            // this.rules.arrivalTime[0].required = false
          });
        }
      });
    },
    PhotoArchival() {
      //没保存就换路由了
      this.Save("ruleForm");
    },
    search() {
      let callTableData = [];
      console.log(this.searchtext)
      if (this.searchtext) {
          var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (reg.test(this.searchtext)||!isNaN(this.searchtext)) {
           this.callTableData.find((item) => {
            if (item.itemName.indexOf(this.searchtext) > -1) {
              callTableData.push(item);
            }
          });
        } else {
          // console.log();
          this.callTableData.find((item) => {
            if (item.itemNameAbbr.indexOf(this.searchtext) > -1) {
              callTableData.push(item);
            }
          });
        }
        this.tableData = callTableData;
      } else {
        user
          .getVehicleDictionary({
            id: 0,
            serviceItemTypeCode: "use_in_rec_info"
          })
          .then(res => {
            res.data.serviceItems.useInRecInfo.forEach(item => {
              item.itemNumber = parseInt(item.itemNumber);
              item.feeAmount = item.itemNumber * item.itemPrice;
              item.discountCharge = 0;
              //优惠字段，假数据
            }); //金额转换成数字类型
            // 计算总价
            this.tableData = res.data.serviceItems.useInRecInfo;
            this.callTableData = res.data.serviceItems.useInRecInfo;
          });
      }
    },
    StorageChanges(name, text) {
      switch (name) {
        case "bodyDepositCode":
          console.log(text);
          this.ruleForm.bodyDeposit = text;
          break;
        case "sourceCode":
          this.dictionary.dicts.rec_source_type.find(item => {
            if (item.dataCode === text) {
              this.ruleForm.source = item.dataText;
            }
          });
          console.log(this.ruleForm.source);
          break;
        case "taskStateCode":
          this.dictionary.dicts.rec_task_state_type.find(item => {
            if (item.dataCode === text) {
              this.ruleForm.taskState = item.dataText;
            }
          });
          console.log(this.ruleForm.taskState);
          break;
        case "relationCode":
          this.dictionary.dicts.relationship_with_deceased.find(item => {
            if (item.dataCode === text) {
              this.ruleForm.relation = item.dataText;
            }
          });
          console.log(this.ruleForm.relation);
          break;
        case "recCarId":
          this.dictionary.PickUpVehicle.find(item => {
            if (item.id === text) {
              // this.ruleForm.recCarNo = ;
              this.ruleForm.dispatchCar.recCarNo = item.carNo;
            }
          });
          console.log(this.ruleForm.recCarNo);
          break;
        default:
        // 都不符合，则执行最后的default部分。
      }
    },
    //根据车型加载车辆
    loadTransportCar(code) {
      this.ruleForm.purposeCode = "";
      this.ruleForm.chargeRemark = "";
      this.ruleForm.recCharge = "";
      this.dictionary.dicts.transport_car_type.find(item => {
        if (item.dataCode === code) {
          this.ruleForm.carType = item.dataText;
        }
      });
      let purpose = this.dictionary.dicts.transport_car_use[0].dataCode; //车辆用途编码
      this.ruleForm.purposeCode = purpose;
      this.VehicleUse(purpose);
      if (code === 3 || code === 4) {
        //判断车型档次
        console.log(this.dictionary.dicts.transport_car_use);
        this.dictionary.dicts.transport_car_use.forEach(item => {
          if (item.dataCode === 2) item.disableState = 1;
        });
      } else {
        this.dictionary.dicts.transport_car_use.forEach(item => {
          if (item.dataCode === 2) item.disableState = 0;
        });
      }
      let load_this = this;
      let postData = {
        //车辆类型编码
        typeCode: code
      };
      Type["loadtransportcarwithtypecode"](postData)
        .then(res => {
          const { data } = res;
          if (!data) {
            load_this.$message("加载信息出错");
          }
          //数据读取成功
          this.dictionary.PickUpVehicle = data;
          this.$forceUpdate();
        })
        .catch(error => {
          load_this.$message(error);
        });
    },
    //根据车型加载车辆
    loadTransportCars(code) {
      let load_this = this;
      let postData = {
        //车辆类型编码
        typeCode: code
      };
      Type["loadtransportcarwithtypecode"](postData)
        .then(res => {
          const { data } = res;
          if (!data) {
            load_this.$message("加载信息出错.");
          }
          //数据读取成功
          this.dictionary.PickUpVehicle = data;
          this.$forceUpdate();
        })
        .catch(error => {
          load_this.$message(error);
        });
    },
    detailedInformation(id) {

      user.getVehicleDictionary({ id }).then(res => {
        let { data } = res;
        //  只要返回正确的id ,接运司机和抬尸工就可以正常显示
        //模拟假数据
        console.log(data, 99999999);
        // 数据问题;
        // if (!data.dispatchCar) {
        //   data.dispatchCar = {
        //     recCarId: 1
        //   };
        // }
        data.relSelDelete = [];
        data.recSelItem.forEach(item => {
          item.itemNumber = parseInt(item.itemNumber);
          item.feeAmount = item.itemNumber * item.itemPrice;
          item.itemPrice = item.itemPrice.toFixed(2);
          //优惠假数据
          item.discountCharge = 0;
        });
        this.ruleForm = data;
        // 已选择随车辆物品、服务
        if (!this.details) {
          this.loadTransportCar(data.carTypeCode);
        } else {
          this.loadTransportCars(data.carTypeCode);
        }
      });
    },
    PrintQRcode(id) {
      if (!id) {
        this.$message({
          message: "请先保存信息再打印接运二维码",
          type: "warning"
        });
        return;
      }
      Type["PrintQRcode"](id).then(res => {
        let { data } = res;
        this.printServiceAgreement(data);
      });
    },
    printServiceAgreement(printData) {
      let this_print = this;
      let LODOP = getLodop();
      if (LODOP == null || !LODOP) {
        this_print.$.messager.alert(
          "系统提示",
          "您的浏览器不支持打印控件，请用IE重试或安装打印控件后重试"
        );
        return;
      }
      let recCode = `<p>${printData.recCode}</p>`;
      let contact = `<p>联系人:${printData.contact}</p>`;
      let contactPhone = `<p>联系人电话:${printData.contactPhone}</p>`;
      let deathCause = `<p>死亡原因:${printData.deathCause}</p>`;
      let deadName = `<p>逝者姓名:${printData.deadName}</p>`;
      let recOperationcode = printData.recCode;
      //设置字体
      LODOP.SET_PRINT_STYLE("FontSize", 11);
      //调用打印控件进行测试
      LODOP.ADD_PRINT_HTM(
        20,
        260,
        300,
        25,
        "<p style='font-size:20px;font-weight: bold;'>接运二维码打印</p>"
      );
      //打印协议
      LODOP.ADD_PRINT_BARCODE(50, 50, 200, 200, "QRCode", recOperationcode);
      LODOP.ADD_PRINT_HTM(50, 230, 200, 75, recCode);
      LODOP.ADD_PRINT_HTM(70, 230, 200, 25, contact);
      LODOP.ADD_PRINT_HTM(90, 230, 200, 25, contactPhone);
      LODOP.ADD_PRINT_HTM(110, 230, 200, 25, deathCause);
      LODOP.ADD_PRINT_HTM(130, 230, 200, 75, deadName);
      LODOP.PREVIEW();
    }, //获取打印服务协议数据
    AddCarItems(scope) {

      scope.row.feeAmount =
        scope.row.itemPrice * scope.row.itemNumber - scope.row.discountCharge;
      scope.row.serviceItemId = scope.row.id;
      scope.row.id = 0;

      scope.row.itemCharge = scope.row.itemPrice * scope.row.itemNumber; //项目金额
      scope.row.benefitCharge = 0; //减免金额
      scope.row.realityCharge = 0; //实际收费金额
      //假数据 后台需要 实际用不到
      scope.row.chargeTime = this.formatDate(new Date()); // 费用时间

      this.ruleForm.recSelItem.push(scope.row);
      console.log(this.ruleForm.recSelItem);
      //添加完成之后恢复列表
      if (!this.searchtext) {
        user
          .getVehicleDictionary({
            id: 0,
            serviceItemTypeCode: "use_in_rec_info"
          })
          .then(res => {
            //优惠字段，假数据
            res.data.serviceItems.useInRecInfo.forEach(item => {
              item.discountCharge = 0;
            });
            res.data.serviceItems.useInRecInfo.forEach(item => {
              item.itemNumber = parseInt(item.itemNumber);
              item.feeAmount = item.itemNumber * item.itemPrice;
            }); //金额转换成数字类型
            // 计算总价
            this.tableData = res.data.serviceItems.useInRecInfo;
            this.callTableData = res.data.serviceItems.useInRecInfo;
          });
      } else {
        this.search();
      }
    },
    DeleteItems(scope) {
      //判断id是否为0
      if (scope.row.id) {
        this.ruleForm.relSelDelete.push(scope.row);
      }
      this.ruleForm.recSelItem.splice(scope.$index, 1);
      console.log(this.ruleForm.relSelDelete);
    },
    getSummaries({ columns, data }) {
      const sums = [];
      let sum = null;
      data.forEach(item => {
        sum += item.feeAmount;
      });
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        if (index === 5) {
          sums[index] = sum;
          return;
        }
      });
      // sums[5] = sums[5].toFixed(2)
      return sums;
    },
    TotalAmount(itemPrice, itemNumber, discountCharge) {
      let a = itemPrice * itemNumber - discountCharge;
      return a.toFixed(2);
    },
    VehicleUse(purposeCode) {
      if (!this.ruleForm.carTypeCode) {
        this.$message("请选择预约车型");
        return;
      }
      this.dictionary.dicts.transport_car_use.find(item => {
        if (item.dataCode === purposeCode) {
          this.ruleForm.purpose = item.dataText;
        }
      });
      let purpose = this.dictionary.dicts.transport_car_use.find(item => {
        return purposeCode === item.dataCode;
      });
      let chargeRemark = this.dictionary.ruleItems.find(item => {
        if (
          item.dataCode === this.ruleForm.carTypeCode &&
          item.purpose === purpose.dataText
        ) {
          return item;
        }
      });
      // console.log(chargeRemark);
      if (chargeRemark) {
        this.ruleForm.recCharge = parseInt(chargeRemark.itemPrice);
        this.ruleForm.chargeRemark = `车辆用途: ${chargeRemark.purpose},${chargeRemark.ruleType}${chargeRemark.ruleDescribe}`;
      } else {
        this.ruleForm.recCharge = "";
        this.ruleForm.chargeRemark = "";
      }
    },
    formatDate(value) {
      if (!value) return;
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    }
  }
};
</script>
<style>
/*.cascader .el-form-item__label{*/
/*width: 9vw!important;*/
/*}*/
.cascader .el-input,
.cascader .select .el-input {
  width: 25.6vw !important;
  min-width: 40px;
}

.lineheight label {
  line-height: 20px !important;
  letter-spacing: 3px;
}

.streetwidth,
.streetwidth input,
.streetwidth .el-input,
.streetwidth .el-select {
  width: 7vw !important;
  min-width: 120px !important;
}

.agewidth,
.agewidth input,
.agewidth .el-input {
  width: 5vw !important;
  min-width: 90px !important;
  overflow: hidden;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.PageContent .zm .el-input,
.PageContent .zm .el-select {
  width: 25.6vw;
  min-width: 40px;
}

.marginbottom0 .el-form-item {
  margin-bottom: 0px;
}
.home .el-textarea__inner {
  line-height: 2;
  min-height: 70px !important;
}
.home .el-select .el-input__inner {
  cursor: pointer;
  padding-right: 2px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<style scoped>
.home {
  color: #606266;
}

.w1230 {
  width: 72.5vw !important;
  min-width: 40px !important;
}

.w425 {
  width: 25.6vw;
  min-width: 40px;
}
.w50 {
  width: 40vw;
}
.letter2 {
  letter-spacing: 5px;
}
.DescriptionOfCharges {
  /* style="width:100vm; */
  widows: 100vm;
  height: 70px;
  background: #f0f0f0;
  border-left: 5px solid #a9c3de;
  padding-top: 20px;
  padding-left: 10px;
}
.DescriptionOfCharges > p {
  /* style="width:100vm; */
  margin-left: 30px;
  margin-top: 5px;
}
/* -------------------- */
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
